//src/components/header.tsx
import NextLink from "next/link"
import { Flex, Button, useColorModeValue, Spacer, Heading, LinkBox, LinkOverlay,Stack,Text } from '@chakra-ui/react'
import Link from "next/link"
import MenuItem from "./MenuItem"

const siteTitle="Index"
export default function Header() {
  // const MenuItem = ({ children, isLast, to = "/", ...rest }) => {
  //   return (
  //     <LinkOverlay href={to}>
  //       <Text display="block" {...rest}>
  //         {children}
  //       </Text>
  //     </LinkOverlay>
  //   )
  // }
  return (
    <Flex as='header' bg={useColorModeValue('gray.100', 'gray.900')} p={4} alignItems='center'>


      
      <Stack
      m={4}
      spacing={8}
      align="center"
      justify={["center", "space-between", "flex-end", "flex-end"]}
      direction={["column", "row", "row", "row"]}
      pt={[4, 4, 0, 0]}
    >
      <LinkBox>
        <NextLink href={'/'} passHref>
          <LinkOverlay>
            <Heading size="md">{siteTitle}</Heading>
          </LinkOverlay>
        </NextLink>

        
      </LinkBox>   
      <MenuItem to="/coffeelist">Orders</MenuItem>
      <MenuItem to="/buycoffee">Buy</MenuItem>
      <MenuItem to="/addressList">Addresses</MenuItem>
      <MenuItem to="/productList">Product</MenuItem>
      <MenuItem to="/addressList">AddCoffd</MenuItem>
      <MenuItem to="/addressList">Addresses11</MenuItem>
    </Stack>

        
        
      <Spacer />
      <Button >Button for Account </Button>
    </Flex>
  )
}
